<template>
  <div class="position-relative">
    <div
      class="pos-absolute h-full flex duration-300 slider-ad"
      style="left: -95px; z-index: 201"
      @mouseleave="handleHideFullAd"
      ref="sliderAdRef"
    >
      <div @mouseover="handleShowFullAd">
        <router-link to="/" class="h-full block">
          <el-image :src="sliderAdImage" style="height: 100%; width: 105px"></el-image>
        </router-link>
      </div>
      <transition name="fade">
        <div
          class="tranzition duration-600 full-ad"
          @mouseleave="handleHideFullAd"
          style="z-index: 203; width: 0px; transform: translateX(-1px)"
          v-show="isShowFullAd"
        >
          <router-link to="/" class="h-full block">
            <el-image
              :src="sliderAdFullImage"
              style="height: 100%; width: 100%"
              fit="cover"
            ></el-image>
          </router-link>
        </div>
      </transition>
    </div>
    <div
      class="flex bg-white justify-center border-rounded-2xl pos-relative p-3"
      style="height: 45vh; z-index: 201"
    >
      <div style="width: 230px" class="h-full">
        <SliderNavPanel :show="isShow"/>
      </div>
      <div class="flex-1">
        <BannerCenterPanel></BannerCenterPanel>
      </div>
      <div style="width: 250px">
        <UserSliderPanel />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import BannerCenterPanel from "./ui/BannerCenterPanel.vue";
import UserSliderPanel from "./ui/UserSliderPanel.vue";
import SliderNavPanel from "./ui/SliderNavPanel.vue";

import sliderAdImage from "@/assets/images/ad/d27423819774937e.png.avif";
import sliderAdFullImage from "@/assets/images/ad/9359fc18747b7c7e.jpg.avif";

const isShow = ref<number>(0); // 控制导航栏子窗口显隐 
const sliderAdRef = ref<HTMLDivElement | null>(null);
const isShowFullAd = ref(false);
type TimeoutId = number | NodeJS.Timeout | null;
let closeTimer: TimeoutId = null;
const handleShowFullAd = () => {
  isShowFullAd.value = true;
  isShow.value=Math.random();
  closeTimer = setTimeout(() => {
    if (!sliderAdRef.value) return;
    sliderAdRef.value.classList.add("isOpen");
    sliderAdRef.value.style.zIndex = "203";
  }, 150);
};
const handleHideFullAd = () => {
  clearTimer();
  if (!sliderAdRef.value) return;
  sliderAdRef.value.classList.remove("isOpen");
  setTimeout(() => {
    if (!sliderAdRef.value) return;
    sliderAdRef.value.style.zIndex = "201";
    isShowFullAd.value = false;
  }, 150);
};
const clearTimer = () => {
  if (closeTimer) {
    clearTimeout(closeTimer);
    closeTimer = null;
  }
};

onMounted(() => {});
onUnmounted(() => {
  clearTimer();
});
</script>
<style scoped lang="scss">
.slider-ad {
  transition: all 0.3s ease-in-out;
  .full-ad {
    width: 0px;
    transition: all 0.3s ease-in-out;
  }

  &.isOpen {
    .full-ad {
      width: 805px !important;
    }
  }
}
</style>
